﻿<!DOCTYPE html>
<html>
    <head>
        <title>Turbulenz - Getting Started Guide - API Example</title>
        <meta charset="utf-8">
        <script src="jslib/debug.js"></script>
        <!--基础类-->
        <script src="jslib/webgl/turbulenzengine.js"></script>
        <script src="jslib/webgl/graphicsdevice.js"></script>
        <!--碰撞检测等-->
        <script src="jslib/physics2ddevice.js"></script>
        <!--2D绘制-->
        <script src="jslib/draw2d.js"></script>
        <!-- Script includes go here -->
    </head>
    <body>
        <canvas id="canvas"width="660px"height="480px"/>
        <script>
            var s_top=false,s_bottom=false,s_left=false,s_right=true;

            /*步长*/
            var moveStep = 15;

            var padding = 0;
            /* Game code goes here */
            /*创建基础类*/
            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });
            /*创建基础模块*/
            var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
            /*背景设置*/
            var r = 0.0, g = 0.0, b = 0.0, a = 1.0;
            var bgColor = [r, g, b, a];


            /*绘制2D*/
            var draw2D = Draw2D.create({
                graphicsDevice: graphicsDevice
            });
            var x1 = padding;
            var y1 = padding;
            var x2 = graphicsDevice.width - padding;
            var y2 = graphicsDevice.height - padding;
            var rectangle = [x1, y1, x2, y2];
            var drawObject = {
                color: [0.3, 0.3, 0.3, 1.0],
                destinationRectangle: rectangle
            };
            /*snake头部的shape*/
            //var shapeHead = Physics2DDevice.createRectangleVertices(x1, y1, x2, y2);
            /*一些sprite精灵 动态组成了snake*/
            var snake = new Array();
            /*食物*/
            var food = Draw2DSprite.create({
                width: 15,
                height: 15,
                x: Math.ceil(Math.random()*21)*30+15,
                y: Math.ceil(Math.random()*11)*30+30 ,
                color: [0.0, 0.0, 0.0, 1.0],
                //rotation: Math.PI / 4
                rotation: 0
            });

            init();
            var r1 = 1.0,g1 = 1.0,b1= 1.0;
            var spriteColor = [r1,g1, b1, 1.0];
            /*精灵的纹理*/
            /*可以使用资源作为纹理 当前项目使用渐变色作为纹理*/
            /*
            var texture = graphicsDevice.createTexture({
                src: "assets/textures/particle_spark.png",
                mipmaps: true,
                onload: function (texture)
                {
                    if (texture)
                    {
                        sprite.setTexture(texture);
                        sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
                    }
                }
            });*/
            var scale = [1, 1];
            /*精灵的移动*/
            var PI2 = Math.PI * 2;
            var rotateAngle = Math.PI / 32;

            /*游戏每一帧的循环 更新画面*/
            function update() {
                /* Update code goes here */
                colorChange();
                bgColor[2] = b % 1; // Clamp color between 0-1
                //sprite.rotation += rotateAngle;
                //sprite.rotation %= PI2; //Wrap rotation at PI * 2

                //scale[0] = scale[1] = Math.cos(sprite.rotation) + 2;
                //sprite.setScale(scale);
                var i = 0;
                for(i;i<snake.length;i++){
                    snake[i].setColor(spriteColor);
                }
                //sprite.setColor(spriteColor);
                /*每一帧的画面更新代码*/
                /*清除画面*/
                if (graphicsDevice.beginFrame())
                {

                    graphicsDevice.clear(bgColor, 1.0);
                    /* Rendering code goes here */

                    draw2D.begin();
                    draw2D.draw(drawObject);
                    draw2D.end();

                    //透明精灵背景
                    //draw2D.begin("additive");
                    draw2D.begin();
                    draw2D.drawSprite(food);
                    var i = 0;
                    for(i;i<snake.length;i++){
                        draw2D.drawSprite(snake[i]);
                    }
                    draw2D.end();

                    graphicsDevice.endFrame();
                }
            }
            window.onkeydown = function(e) {
                var keynum;
                var keychar;
                var numcheck;
                if (window.event) // IE
                {
                    keynum = e.keyCode;
                }
                else if (e.which) // Netscape/Firefox/Opera
                {
                    keynum = e.which;
                }
                keychar = String.fromCharCode(keynum);
                switch (keychar) {
                    case '&':
                        if (!s_bottom) {
                            s_top = true;
                            s_bottom = false;
                            s_left = false;
                            s_right = false;
                        }
                       break;
                    case '(':
                        if(!s_top) {
                            s_top = false;
                            s_bottom = true;
                            s_left = false;
                            s_right = false;
                        }
                        break;
                    case '%':
                        if(!s_right) {
                            s_top = false;
                            s_bottom = false;
                            s_left = true;
                            s_right = false;
                        }
                        break;
                    case '\'':
                        if(!s_left) {
                            s_top = false;
                            s_bottom = false;
                            s_left = false;
                            s_right = true;
                        }
                        break;
                    default:
                        break;
                }
            };

            /*初始化 测试*/
            function init(){

                /*添加一个精灵*/

                var sprite = Draw2DSprite.create({
                    width: 15,
                    height: 15,
                    x: Math.ceil(Math.random()*21)*30+15,
                    y: Math.ceil(Math.random()*11)*30+15 ,
                    color: [1.0, 1.0, 1.0, 1.0],
                    //rotation: Math.PI / 4
                    rotation: 0
                });
                snake.push(sprite);
            }

            /*单步移动*/
            function move(sprite){
                if(s_top){
                    sprite.y-=moveStep;
                }else if(s_bottom){
                    sprite.y+=moveStep;
                }else if(s_left){
                    sprite.x-=moveStep;
                }else if(s_right){
                    sprite.x+=moveStep;
                }

                if(sprite.x<=0+padding){
                    sprite.x = draw2D.width-5-padding;
                }else if(sprite.x >= draw2D.width-padding){
                    sprite.x = 15+padding;
                }else if(sprite.y <= 0+padding){
                    sprite.y = draw2D.height-5-padding;
                }else if(sprite.y >= draw2D.height-padding){
                    sprite.y = 15+padding;
                }

                /*碰撞检测*/

                /*食物*/
                if(snake[0].x == food.x && snake[0].y == food.y){
                    /*snake长度+1 食物消失(在另一个随机位置显示)*/
                    /*复制最后一个snake节点*/
                    var sprite = Draw2DSprite.create({
                        width: 15,
                        height: 15,
                        x: snake[snake.length-1].x,
                        y: snake[snake.length-1].y ,
                        color: [1.0, 1.0, 1.0, 1.0],
                        rotation: 0
                    });
                    snake.push(sprite);
                    /*随机食物下一个位置*/
                    foodPositionR();
                }
                /*碰到自己*/
                if(snake.length>1) {
                    for (var i = 1; i < snake.length; i++) {
                        if(snake[0].x==snake[i].x && snake[0].y==snake[i].y){
                            TurbulenzEngine.removeInternalEventListener(snakeTime);
                            alert("挑战失败！您的分数"+snake.length);
                        }
                    }
                }
            }

            /*食物位置更新*/
            function foodPositionR(){
                var x = Math.ceil(Math.random()*21)*30+15;
                var y = Math.ceil(Math.random()*15)*30+15;
                food.x = x;
                food.y = y;
                for(var i= 0; i< snake.length;i++){
                    if(snake[i].x == x && snake[i].y == y){
                        foodPositionR();
                    }
                }
            }

            /*snake 移动*/
            /*
            先保存第一个的位置
            第一个sprite移动到下一个位置
            下一个sprite移动到上一个精灵的位置
            保存上一个的位置
             */
            function snakesMove(){
                var x=snake[0].x;
                var y=snake[0].y;
                var x_temp = 0;
                var y_temp = 0;
                move(snake[0]);
                var i = 1;
                for(i;i<snake.length;i++){
                    var x_temp = snake[i].x;
                    var y_temp = snake[i].y;
                    snake[i].x = x;
                    snake[i].y = y;
                    x = x_temp;
                    y = y_temp;
                }
            }

            /*渐变色纹理*/
            function colorChange(){
                r1 = Number(r1);
                g1 = Number(g1);
                b1 = Number(b1);
                if(r1>0 && g1==1 && b1==1){
                    r1 -= 0.01;
                    if(r1!=0 && r1 !=1) {
                        r1 = r1.toFixed(2);
                    }
                }else if(r1==0 && g1>0 && b1==1 ){
                    g1 -= 0.01;
                    if(g1!=0 && g1 !=1) {
                        g1 = g1.toFixed(2);
                    }
                }else if(r1==0 && g1==0 && b1>0){
                    b1 -= 0.01;
                    if(b1!=0 && b1 !=1) {
                        b1 = b1.toFixed(2);
                    }
                }else if(r1<1 && g1==0 && b1==0){
                    r1+=0.01;
                    if(r1!=0 && r1 !=1) {
                        r1 = r1.toFixed(2);
                    }
                }else if(r1==1 && g1<1 && b1==0 ){
                    g1+=0.01;
                    if(g1!=0 && g1 !=1) {
                        g1 = g1.toFixed(2);
                    }
                }else if(r1==1 && g1==1 && b1<1){
                    b1+=0.01;
                    if(b1!=0 && b1 !=1) {
                        b1 = b1.toFixed(2);
                    }
                }

                spriteColor[0] = r1;
                spriteColor[1] = g1;
                spriteColor[2] = b1;

            }

            var snakeTime = TurbulenzEngine.setInterval(update, 1000 / 60);
            TurbulenzEngine.setInterval(snakesMove, 1000 / 5);
        </script>
    </body>
</html>